<template>
	<view>
		<!-- 背景图 -->
		<view class="bg">
			<image src="../../../static/finishbg.png" mode="" ></image>
		</view>
		
		<!-- 拍卖状态 -->
		<view class="state">
			<text>已结拍</text>
			<text class="time">结拍于2021/08/01 10:00:00</text>
		</view>
		
		<!-- 拍卖品详情 -->
		<view class="name">
			<view>
				<text class="person">柳子峻《三羊开泰》</text>
			</view>
			<view class="size">
				<text>三尺竖幅 (90*70cm) </text>
			</view>
		</view>
		
		<!-- 拍卖价格 -->
		<view class="price">
			<view class="start">
				<view>
					<text>起拍价</text>
				</view>
				<view>
					<text>¥500,000</text>
				</view>
			</view>
			
			<view class="mark-up">
				<view>
					<text>加价幅度</text>
				</view>
				<view>
					<text>¥10,000</text>
				</view>
			</view>
			
			<view class="promise">
				<view>
					<text>保证金</text>
				</view>
				<view>
					<text>¥90000</text>
				</view>
			</view>
		</view>
		
		<!-- 出价记录 -->
		<view class="history">
			<view class="title">
				<text>出价记录</text>
			</view>
			<!-- 出价详情 -->
			<view class="detail">
				<view>
					<image src="../../../static/person.jpg" mode=""></image>
				</view>
				<view>
					<text>躺板板</text>
				</view>
				<view>
					<text>07.28&nbsp16:00</text>
				</view>
				<view >
					<text class="price">¥1200</text>
				</view>
				<view class="first">
					<text>领先</text>
				</view>
			</view>
			
			<view class="detail" v-for="(item,index) in stateList" :key = index>
				<image :src="item.imgUrl" mode=""></image>
				<text>{{item.name}}</text>
				<text>{{item.time}}</text>
				<text>{{item.price}}</text>
				<view class="second">
					<text>{{item.state}}</text>
				</view>
			</view>
			
	
		</view>
	</view>
</template>

<script>
export default {
	data(){
		return{
			stateList:[
				{
					imgUrl:'../../../static/person.jpg',
					name:'金铲铲',
					time:'07.28 16:00',
					price:'¥1050',
					state:'出局'
				}
			]
		}
	}
}
</script>

<style lang="scss" scoped>
	.bg image{
		width: 100%;
	}
	
	.state{
		background: linear-gradient(to right,#333333,#434343);
		height: 140rpx;
		margin-top: -20rpx;
		position: relative;
	}
	.state text{
		color: #ffffff;
		font-size: 40rpx;
		font-weight: 700;
		font-style: oblique;
		line-height: 140rpx;
		margin-left: 20rpx;
	}
	.state .time{
		color: #ffffff;
		font-size: 28rpx;
		font-weight: 400;
	  font-style: normal;
	  position: absolute;
		right: 30rpx;
	}
	.name .person{
		font-size: 36rpx;
		font-weight: 600;
		margin-left: 20rpx;
	}
	.name .size{
		font-size: 24rpx;
		color: #939393;
		font-weight: 400;
		margin-left: 20rpx;
	}
	
	.price{
		width: 92%;
		margin: 4%;
		background-color: #f4f4f8;
		display: flex;
		justify-content: space-around;
		border-radius: 5rpx;
	}
	.title{
		font-size: 28rpx;
		color: #939393;
		margin-left: 20rpx;
	}
	
	.detail{
		height: 80rpx;
		display: flex;
		margin-left: 20rpx;
		justify-content: space-around;
	}
	
	.detail .price{
		color: #d03f3d;
	}
	
	.detail image{
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
	}
	
	.detail text {
		line-height: 60rpx;
	}
	
	.detail .first {
		background-color: #d03f3d;
		color: #ffffff;
		height: 40rpx;
		margin-top: 15rpx;
		width: 120rpx;
		text-align: center;
		border-radius: 40rpx;
	}
	
	.detail .first text {
		line-height: 40rpx;
	}
	
	.detail .second {
	background-color: #cccccc;
	color: #ffffff;
	height: 40rpx;
	line-height: 40rpx;
	margin-top: 15rpx;
	width: 120rpx;
	text-align: center;
	border-radius: 40rpx;
	}
	
	.detail .second text {
		line-height: 40rpx;
	}
</style>
